<!--
 * @Author: Bennty
 * @Date: 2024-12-27 16:13:23
 * @LastEditors: 
 * @LastEditTime: 2025-01-09 14:18:35
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="查看付款凭证" @close="handleClose">
        <div>
            <el-carousel :autoplay="false" height="500px">
                <el-carousel-item v-for="item in props.proofs" :key="item">
                    <el-image class="proof-image" :src="item" fit="fill" ></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClose" >确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">

const props = defineProps<{
    visible: boolean,
    proofs: string[]
}>();
const emits = defineEmits(['close']);


const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>

.proof-image{
    width: 100%;
    height: 500px;
}
</style>